<template>
  <div class="complaint-detail">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/complaint' }">违规投诉</el-breadcrumb-item>
        <el-breadcrumb-item>违规投诉详情页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="detail-content">
      <div class="title-and-time">
        <h2>{{ complaint.title }}</h2>
        <span class="label">发布时间：<span class="value">{{ complaint.createTime }}</span></span>
      </div>
      
      <div class="info-item">
        <span class="label">发生地：</span>
        <span class="value">{{ complaint.location }}</span>
        <div class="status-tag-container">
          <el-tag :type="complaint.status === '处理完成' ? 'success' : 'warning'">
            当前状态：{{ complaint.status }}
          </el-tag>
        </div>
      </div>
      
      <div class="info-item">
        <span class="label">污染企业名称：</span>
        <span class="value">{{ complaint.company }}</span>
      </div>
      
      <div class="info-item">
        <span class="label">详细位置：</span>
        <span class="value">{{ complaint.address }}</span>
      </div>
      
      <div class="info-item">
        <span class="label">污染类型：</span>
        <span class="value">{{ complaint.type }}</span>
      </div>
      
      <div class="info-item">
        <span class="label">投诉时间：</span>
        <span class="value">{{ complaint.complaintTime }}</span>
      </div>
      
      <div class="info-item">
        <span class="label">污染持续时间：</span>
        <span class="value">{{ complaint.duration }}</span>
      </div>
      
      <div class="info-item">
        <span class="label">是否对政府公开联系方式：</span>
        <span class="value">{{ complaint.publicContact ? '是' : '否' }}</span>
      </div>
      
      <div class="info-item">
        <el-icon class="paperclip-icon"><Paperclip /></el-icon>
        <span class="label">附件：</span>
        <span class="value attachment-value">
          <el-icon class="folder-icon"><Folder /></el-icon>
          <el-link type="primary" @click="downloadAttachment" class="attachment-text">{{ complaint.attachment }}</el-link>
        </span>
      </div>
      
      <div class="detail-section">
        <h3>详情描述</h3>
        <div class="detail-text">
          <h4>违法行为：</h4>
          <p>{{ complaint.illegalBehavior1 }}</p>
          <p>{{ complaint.illegalBehavior2 }}</p>
        </div>
        <div class="detail-text">
          <h4>期盼解决方案：</h4>
          <p>{{ complaint.solution1 }}</p>
          <p>{{ complaint.solution2 }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Paperclip, Folder } from '@element-plus/icons-vue';

export default {
  components: {
    Paperclip,
    Folder
  },
  setup() {
    const route = useRoute();
    const complaintId = route.params.id;

    const complaint = ref({
      id: complaintId,
      title: '古浪-河口天然气联络管道工程施工第二标段位于甘肃省兰州市永登县、西固区境内',
      createTime: '2023年04月13日',
      location: '甘肃省兰州市·永登县',
      status: '审核通过，等待转办',
      company: '中油（新疆）石油工程有限公司；国家管网集团联合管道西部分公司',
      address: '兰州市永登县终点为西固区',
      type: '生态破坏',
      complaintTime: '2023-04-06',
      duration: '1年以下',
      publicContact: false,
      attachment: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目附件。',
      illegalBehavior1: '（1）项目在未履行国土、环保审批手续的情况下未批先建。破坏农田、林地、草原，严重损害当地生态环境。',
      illegalBehavior2: '（2）项目施工过程中，未按照相关法律法规要求进行环保、绿化等措施，造成环境污染。',
      solution1: '（1）相关部门提供相关法律法规停止该项目违法行为，坚决整改，符合国家环保和土地法规后再进行施工。',
      solution2: '（2）当地政府及司法部门履职到位，对之前违法事件进行处罚及诉讼，避免此类事件发生，使环保监管不留于表面，坚持"零容忍"的态度依法查处违法行为，拒绝盲目发展。'
    });

    const downloadAttachment = () => {
      ElMessage.success('开始下载附件');
      // 这里应该调用API下载附件
    };

    return {
      complaint,
      downloadAttachment
    };
  }
};
</script>

<style scoped>
.complaint-detail {
  padding: 20px;
  background-color: #f5f5f5;
}

.header {
  margin-bottom: 20px;
}

.detail-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.title-and-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  color: #666;
  white-space: nowrap;
  margin-right: 5px;
}

.value {
  color: #333;
}

.attachment-value {
  display: flex;
  align-items: center;
}

.paperclip-icon {
  transform: rotate(-90deg);
  margin-right: 5px;
  color: #666;
}

.folder-icon {
  margin-left: 5px;
  color: black;
  background:white;
  padding: 2px;
  border-radius: 2px;
  font-size: 14px;
}

.status-tag-container {
  margin-left: auto;
}

.detail-section {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.detail-section h3 {
  color: #20b2aa;
}

.detail-text {
  margin-bottom: 20px;
}

.detail-text h4 {
  margin-bottom: 10px;
  color: #333;
}

.detail-text p {
  line-height: 1.6;
  color: #666;
}

.attachment-text {
  color: black; 
}
</style>